<template>
      <el-form-item :label="wlabel">
            <el-tag :key="tag" v-for="tag in directorTags" closable :disable-transitions="false" @close="handleClose(tag)">
                {{tag}}
            </el-tag>
            <el-input class="input-new-tag" v-if="directorVisible" v-model="directorValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ {{wact}}</el-button>
        </el-form-item>
</template>

<script>
export default {
    props:{
        wlabel:{required: true},
        wact:{ required: true},
        windex:{type:Number, required: true}
    },
    data() {
        return {
            directorTags: [],
            directorVisible: false,
            directorValue: ''
        }
    },
    methods: {
        /*添加导演 */
        handleClose(tag) {
            this.directorTags.splice(this.directorTags.indexOf(tag), 1);
        },
        showInput() {
            this.directorVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let directorValue = this.directorValue;
            if (directorValue) {
                this.directorTags.push(directorValue);
            }
            this.directorVisible = false;
            this.directorValue = '';
            this.$emit('upTagData',this.windex,this.directorTags);
        }
        /*添加导演end */
    }
}
</script>

<style scoped>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>
